<template>
	<div>

		<el-container>
			<!--头部导航栏-->
			<el-header style="text-align: right; font-size: 20px;">
				<span class="logo">
					&nbsp;&nbsp;&nbsp;&nbsp;理工新闻<span style="color:rgb(137, 204, 255) ;">后台管理</span>系统&nbsp;
				</span>

        <el-dropdown>
          <!-- <div class="school"></div> -->


          <span class="el-dropdown-link">
            <i class="el-icon-setting" style="margin-right: 15px;"></i>
            <el-button icon="el-icon-s-custom" class="icon">
              <span style="font-weight: bolder">{{ account }}</span>
            </el-button>
          </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-button type="text" @click="open"
                         icon="el-icon-switch-button">安全退出
              </el-button>
            </el-dropdown-item>
            <el-dropdown-item><el-button type="text" @click="updatepassword" icon="el-icon-switch-button">修改密码</el-button></el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>

      </el-header>


			<!-- 🪂侧边栏-->

			<!--左边栏-->
			<el-container>

				<el-aside width="240px" style="background-color:  white">
					<el-menu router>

            <el-menu-item-group>
              <el-menu-item :index="menu.url" v-for="menu in menuList" :key="menu.name">
                <el-button type="success" icon="el-icon-user" style="width: 175px;">{{ menu.name }}</el-button>
              </el-menu-item>
            </el-menu-item-group>

            <el-menu-item-group>
              <template slot="title"></template>
              <el-menu-item>
                <el-button type="text" @click="open"
                           icon="el-icon-switch-button">安全退出
                </el-button>
              </el-menu-item>
            </el-menu-item-group>

					</el-menu>
				</el-aside>


				<img src="https://pic.baike.soso.com/ugc/baikepic2/16827/20171227225852-88762951_jpg_300_300_19329.jpg/300"
					alt="Your Image">

				<!--中间部分-->
				<el-main>
					<router-view></router-view>
				</el-main>

			</el-container>

		</el-container>
    <el-dialog  title="修改密码"  :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" :rules="rules"  label-width="80px">
        <el-form-item label="当前密码"  prop="curpwd" >
          <el-input v-model="form.curpwd" placeholder="请输入当前密码" @blur="testpassword()"  show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" placeholder="请输入确认密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       	          <el-button @click="dialogVisible = false">取 消</el-button>
       	          <el-button type="primary" @click="updatePwd('form')">确 定</el-button>
       	    </span>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Main",
		data() {
      var validatePass1 = (rule, value, callback) => {
        if (!value) {
          callback(new Error('密码不能为空'));
        }else{
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        }else if(value == this.form.curpwd){
          callback(new Error('两次输入密码一致!'));
        } else {
          callback();
        }
      };
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
			return {
        dialogVisible:false,
        account: "",
				menuList:[],
        form:{
          curpwd:"",
          password:"",
          confirmPassword:""
        },
        rules: {
          curpwd: [
            { validator: validatePass1, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          confirmPassword: [
            { validator: validatePass3, trigger: 'blur' }
          ]
        },

			}
		},
		methods: {
      //修改密码
      updatePwd(formName){
        //数据向后端发送进行验证
        //$refs是一个引用
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('此操作将修改密码, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$http.get("admin/loginCtl/updatepassword?password="+this.form.password).then((resp) => {
                if (resp.data.code == 200) {
                  this.$message({
                    showClose: true,
                    message: '恭喜你，密码修改成功',
                    type: 'success'
                  });
                  //关闭弹框
                  this.dialogVisible=false;
                 //清除数据
                  sessionStorage.clear();
                  //更新页面
                  this.$router.go();
                }
              })
            });
          } else {
            this.$message({
              showClose: true,
              message: '密码格式问题',
              type: 'warning'
            });
            return false;
          }
        });
      },
      //验证当前密码是否正确
      testpassword(){
        this.$http.get("admin/loginCtl/testpassword?curpwd="+this.form.curpwd).then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              showClose: true,
              message: '恭喜你，密码正确✔',
              type: 'success'
            });
          }else {
            this.$message({
              showClose: true,
              message: '密码错误',
              type: 'warning'
            });
            this.form.curpwd='';
          }
        })
      },
      updatepassword(){
        this.dialogVisible=true;
      },
      test() {
        this.$http.get("admin/loginCtl/test").then((resp) => {
          if (resp.data.code == 200) {
            this.$message({
              showClose: true,
              message: '恭喜你，测试正确✔',
              type: 'success'
            });
          }
        })
      },
      open() {
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.clear(); //情况存储信息
          this.$message({
            type: 'success',
            message: '退出成功!'
          });
          this.$router.push("/");
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    },
    mounted() {
      this.account = sessionStorage.account;
      this.$http.get("admin/AdminCtl/showMenu").then((res) => {
        if (res.data.code == 200) {
          this.menuList=res.data.data;
        }
      })
    }
  }

</script>
<style type="text/css" scoped>
#in1 {
  background-color: white;
  width: 100%;
  height: 100vh;
}

.el-header {
  background-color: rgb(50, 180, 60);
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: rgb(40, 120, 100);
  color: #333;
  text-align: center;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}


.icon {
  border-radius: 50%;
  background-color: #6da5ee;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.logo {
  font-weight: 900;
  font-size: 38px;
  background-color: #67C23A;
  font-family: 楷体;
  border-radius: 80px 50px 50px 80px;
  position: absolute;
  left: 0px;
}


img {
  border-radius: 50%;
  width: 70px;
  position: absolute;
  left: 0px;
  top: -2px;
}
</style>